<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    pageContext.setAttribute("App_Path",request.getContextPath());
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container{
            text-align: center;
            margin: 0 auto;
        }
    </style>
</head>
</head>
<body>
<div class="container">
    <h2 style="margin-top: 100px;">员工部门分布</h2>
    <div class="info"></div>
    <div id="main" style="width: 600px;height:400px; margin: 100px auto"></div>
</div>
<script src="${App_Path}/static/js/jquery.min.js"></script>
<script src="${App_Path}/static/js/echarts.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.ajax({
            url:"${App_Path}/getCount",
            type:"GET",
            dataType:"json",
            success:function (result) {
                if(result.code == 100){
                    //操作成功
                    var datas = new Array();
                    var depts = result.extend.pageInfo.list;
                    $.each(depts,function (index,dept) {
                        var deptObj = {
                            "value" : dept.count*8,
                            "name" : dept.deptName
                        }
                        datas.push(deptObj);
                    });
                    render(datas);
                }else{
                    //操作失败
                    $(".info").empty();
                    $(".info").append("操作失败，请稍后再试!");
                }
            },
            error:function () {
                //请求过程出错的处理
                $(".info").empty();
                $(".info").append("请求出错，请稍后再试！");
            }
        });
    });
    function render(datas) {
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            backgroundColor: '#2c343c',

            title: {
                text: 'Staff distribution Pie',
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#ccc'
                }
            },

            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },

            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series: [
                {
                    name: '员工部门分布',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: datas.sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    labelLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    },
                    itemStyle: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

</script>
</body>
</html>